<template>
	<div class="div1">
		<el-backtop target=".div1"></el-backtop>
		<!-- 头部 -->

		<Head :data="searchList" style="background: #fff;"></Head>
		<!-- 中部内容 -->
		<div style="background: #F6F5F7;">
			<div class="tong">
				<div class="content-top">
					<el-steps :space="250" :active="tableData.status > 4 ? 0 : tableData.status" finish-status="success"
						:align-center="true">
						<el-step title="拍下商品"></el-step>
						<el-step title="付款成功"></el-step>
						<el-step title="卖家发货"></el-step>
						<el-step title="确认收货"></el-step>
						<el-step title="已评价"></el-step>
					</el-steps>

				</div>
			</div>

			<div class="tong three">
				<div class="content-top1">
					<div class="save-address">商品信息</div>
					<div>
						<div class="shxx">收货地址：({{ tableData.consignee }} 收) <span class="xq">{{ tableData.provinces }}
								{{ tableData.detail }} （ 电话：{{ tableData.mobile }} ）</span>
						</div>
						<!-- 物流信息 -->
						<!-- <div class="shxx">物流信息</div> -->
						<div class="shxx">{{ kdName }}：<span class="xq">{{ tableData.expressNumber }}</span>
						</div>
						<div>
							<table class="form">
								<thead>
									<tr>
										<th width="50%">宝贝信息</th>
										<th width="15%">单价(元)</th>
										<th width="10%">数量</th>
										<th width="10%">优惠金额</th>
										<th width="15%">实付款</th>
										<th width="10%">交易状态</th>
									</tr>
								</thead>
								<tbody id="cart-goods-list">
									<tr>
										<td colspan="5">{{ tableData.createAt }} 订单号：{{ tableData.orderNum }}</td>
										<td></td>
									</tr>
									<tr>
										<td class="goods">
											<div class="goods-image">
												<img :src="tableData.img">
											</div>
											<div class="goods-information">
												<h4>{{ tableData.title }}</h4>
												<div v-if="tableData.detailJson">商品规格:{{ tableData.detailJson }}</div>
											</div>
										</td>
										<td>
											<strong class="price">{{ DollarSignValue }}<em class="price-em">{{
												getProportion(tableData.price) }}</em></strong>
										</td>
										<td>
											<strong class="amount">{{ tableData.number }}</strong>
										</td>
										<td>
											<strong class="amount">{{ tableData.couponMoney ?
												getProportion(tableData.couponMoney) : getProportion(0) }}</strong>
										</td>
										<td>
											<strong class="amount">{{ DollarSignValue }}<em class="amount-em">{{
												getProportion(tableData.price *
													tableData.number - tableData.couponMoney) }}</em></strong>
										</td>
										<td>
											<div class="state" v-if="tableData.status == 1">待付款</div>
											<div class="state" v-if="tableData.status == 2">待发货</div>
											<div class="state" v-if="tableData.status == 3">待收货</div>
											<div class="state" v-if="tableData.status == 4">待评价</div>
											<div class="state" v-if="tableData.status == 5">已取消</div>
											<div class="state" v-if="tableData.status == 6">退款中</div>
											<div class="state" v-if="tableData.status == 7">已退款</div>
											<div class="state" v-if="tableData.status == 8">拒绝退款</div>
											<div class="state" v-if="tableData.status == 9">拼团中</div>
											<div class="state" v-if="tableData.status == 10">已评价</div>
										</td>
									</tr>
									<tr v-if="tableData.descrition">
										<td colspan="5">备注: {{ tableData.descrition }}</td>
										<td></td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="right">
							<div class="rightT">
								<div class="zje">商品总金额：<span class="zjeS zjeS1">{{ getProportion(tableData.price *
									tableData.number) }}{{ DollarSignValue }}</span>
								</div>
								<div class="zje">运费共计：<span class="zjeS zjeS1">{{ getProportion(tableData.postagePrice)
										}}{{ DollarSignValue }}</span></div>
								<div class="zje">实付款：<span class="zjeS">{{ getProportion(tableData.payMoney) }}{{ DollarSignValue }}</span>
								</div>
							</div>
						</div>
						<!-- 物流信息 -->
						<div class="shxx">物流信息</div>
						<div class="block" v-if="wuliuDate.result">
							<el-timeline>
								<el-timeline-item v-for="(activity, index) in wuliuDate.result.list" :key="index"
									:timestamp="activity.time" :type="activity.type" :icon="activity.icon">
									{{ activity.status }}
								</el-timeline-item>
							</el-timeline>
						</div>
						<div class="block" v-else>
							暂无物流信息
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<Foots></Foots>
	</div>
</template>

<script>
import Head from '@/components/head.vue'
import Foots from '@/components/foots.vue'
import goodsItem from "../../components/goods-item";
import { currency } from '../js/currency'
export default {
	components: {
		Head,
		Foots,
		goodsItem
	},
	data() {
		return {
			page: 1,
			searchList: ['粽子', '防晒霜', '洗衣液', '蚊香液', '抽纸', '零食'],
			tableData: [],
			liuyan: '',
			zongjine: 0,
			zongjineSp: 0,
			zongjineYf: 0,
			checkString: '', //规格
			numberMoney: '', //单价
			number: 1, //购买数量
			editAddress: {},
			checkAddress: false,
			detail: '',
			consignee: '',
			mobile: '',
			provinces: '',
			isExpress: 1,
			list: {},
			skuId: 0,
			commissionPrice: 0,
			dialogVisible: false,
			orderId: 0, //订单id
			activities: [{
				content: '支持使用图标',
				timestamp: '2018-04-12 20:46',
				size: 'large',
				type: 'primary',
				icon: 'el-icon-success'
			}, {
				content: '支持自定义颜色',
				timestamp: '2018-04-03 20:46',
				color: '#0bbd87'
			}, {
				content: '支持自定义尺寸',
				timestamp: '2018-04-03 20:46',
				size: 'large'
			}, {
				content: '默认样式的节点',
				timestamp: '2018-04-03 20:46'
			}],
			wuliuDate: {},
			kdName: '快递单号',
		}
	},
	mounted() {
		// this.checkString = this.$route.query.checkString

		this.dataSelect()
	},
	computed: {
		DollarSignValue() {
			// let dollar=this.$store.state.currencyInfo.figure
			let dollar = this.getDollarSign()
			return dollar
		}
	},
	methods: {
		// 获取货币符号
		getDollarSign() {
			let dollar = this.$store.state.currencyInfo.figure
			return dollar
		},
		// 金额计算比例
		getProportion(money) {
			let proportion = this.$store.state.currencyInfo.scale
			let price = currency(proportion, money)
			return price
			// return money
		},
		// 获取商品详情
		dataSelect() {

			let goodsId = this.$route.query.id
			this.$http({
				url: this.$http.adornUrl('/orders/find'),
				method: 'get',
				params: this.$http.adornParams({
					'id': goodsId
				})
			}).then(({
				data
			}) => {
				this.tableData = []

				// data.data.numberMoney = this.$route.query.numberMoney
				// data.data.number = this.$route.query.number
				// data.data.checkString = this.$route.query.checkString
				this.tableData = data.data
				this.list = data.data
				this.tableData.price = this.tableData.price.toFixed(2)

				// this.wuliu(data.data.expressNumber)
				if (data.data.expressNumber) {
					var exNum = data.data.expressNumber.slice(0, 2)
					var phNum = data.data.mobile.slice(6, 10)
					if (exNum == 'SF') {
						var expressNumber = data.data.expressNumber + ':' + phNum
					} else {
						var expressNumber = data.data.expressNumber
					}
					this.wuliu(expressNumber, data.data.mobile)
				}
			})
		},
		// 获取物流信息
		wuliu(expressNumbe, mobile) {
			console.log('`````````', expressNumbe)
			this.$http({
				url: this.$http.adornUrl('/orders/findExpress'),
				// url:'https://api.shengqianxiong.com.cn/tao/orders/findExpress',
				method: 'get',
				params: this.$http.adornParams({
					'expressNumber': expressNumber,
					'mobile': mobile
				})
			}).then(({
				data
			}) => {
				if (data.status == 0) {
					this.wuliuDate = JSON.parse(data.data);
					this.wuliuDate.result.list[0].icon = 'el-icon-success'
					this.wuliuDate.result.list[0].type = 'success'
					this.kdName = this.wuliuDate.result.expName
				} else {
					this.$message(data.msg);
				}




			})
		},

		// 提交订单
		tijiao() {
			if (!this.checkAddress && this.isExpress === 1) {
				this.$queue.showToast('请设置收货地址信息');
				return;
			}

		},

	}
}
</script>

<style scoped>
.div1 {
	height: 100vh;
	overflow-x: hidden;
}

/* 第一部分 */
.tong {
	width: 1200px;
	margin: 0 auto;
	margin-top: 15px;
}

.three {
	margin-bottom: 80px;
}

.content-top {
	/* width: 880px; */
	padding: 60px 20px 45px 20px;
	border-radius: 6px;
	background: #fff !important;
}

.content-top1 {
	/* width: 880px; */
	padding: 20px;
	border-radius: 6px;
	background: #fff !important;
}

.save-address {
	color: #333333;
	font-weight: 700;
	font-size: 18px;
	position: relative;
}

.shxx {
	margin: 30px 0;
	font-size: 16px;
	font-weight: 600;

}

.xq {
	display: inline-block;
	font-weight: 100;
	color: #999;
}


.address {
	line-height: 34px;
	margin-left: 20px;
	color: #999999;
	font-size: 16px;
}

.updata-address {
	font-size: 14px;
	color: #d0a182;
	/*margin-top: 20px;*/
}

.caitiao {
	width: 100%;
}

.imgs {
	width: 80px;
	height: 80px;
	float: left;
}

.rights {
	margin-left: 90px;
}

.title {
	word-break: break-all;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.guige {
	margin-top: 6px;
	color: #999;
	font-size: 14px;
}

.liuyan {
	font-size: 13px;
	color: #333;
	margin: 30px 0;
}

.ly {
	margin-left: 10px;
	line-height: 25px;
	height: 25px;
	border: 1px solid #DDDDDD;
	width: 300px;
	padding: 0 15px;
	font-size: 12px;
}

.zje {
	font-size: 14px;
	line-height: 24px;
}

.zjeS {
	color: #FF2D55;
	font-weight: 600;
	display: inline-block;
	font-size: 18px;
}

.zjeS1 {
	color: #333;
	font-size: 14px;
}

.right {
	text-align: right;
	margin-top: 10px;
}

.rightT {
	width: 40%;
	padding: 20px;
	margin-left: 60%;
	box-sizing: border-box;
}

.psdz {
	margin-top: 20px;
	color: #333;
	font-size: 14px;

}

.dz {
	color: #999999;
}

.shr {
	margin-top: 10px;
	color: #333;
	font-size: 14px;
}

.tijiao {
	margin-top: 20px;
	width: 180px;
	height: 50px;
	line-height: 50px;
	color: #fff;
	background: #FF2D55;
	border: 1px solid #FF2D55;
	font-size: 15px;

}


table tr {
	border: 1px solid #f6f5f7;
}

table.form {
	border-collapse: collapse;
	empty-cells: show;
	margin: 20px 0px;
	padding: 0px;
	table-layout: fixed;
	width: 100%;
}

/*table.form th,*/
table.form td {
	padding: 15px 10px;
	text-align: left;
}

table.form th {
	text-align: left;
	padding: 5px 10px;
	background: #F6F5F7;
}

.goods {
	/*width: 100%;*/
}

.goods .goods-image img {
	border: 1px solid #DDDDDD;
	float: left;
	height: 100px;
	margin: 0px 20px 0px 0px;
}

.goods .goods-information {
	float: left;
	width: 245px;
}

.goods .goods-information h4 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.goods .goods-information div {
	color: #666666;
	font-size: 15px;
	line-height: 20px;
	margin: 10px 0px 0px 0px;
}

.price,
.amount,
#total-amount {
	/*color: #E00000;*/
}

#total-amount {
	font-size: 22px;
	color: #ff2d55;
}

.price em,
.amount em,
#total-amount em {
	font-style: normal;
}

.combo .combo-minus,
.combo .combo-value,
.combo .combo-plus {
	background: #FFFFFF;
	border: 1px solid #DDDDDD;
	color: #333333;
	float: left;
	font-weight: bold;
	margin: 0px;
	outline: none;
	text-align: center;
}

.combo .combo-minus,
.combo .combo-plus {
	font-size: 16px;
	height: 26px;
	line-height: 26px;
	padding: 0px;
	width: 24px;
}

.combo .combo-value {
	border-left: none;
	border-right: none;
	height: 20px;
	line-height: 20px;
	padding: 2px;
	width: 40px;
}

#cart-delete {
	margin-left: 20px;
}

#settlement {
	background: #E00000;
	border: none;
	color: #FFFFFF;
	float: right;
	font-size: 16px;
	height: 40px;
	line-height: 40px;
	margin: 0px;
	outline: none;
	padding: 0px;
	width: 160px;
}

.appraise {
	padding: 3px 0;
	text-align: center;
	border: 1px solid #dddddd;
}

.state {
	color: #999999;
}

.goodsDet {
	color: #333333;
	margin-top: 4px;
	cursor: pointer;
}

.buy-again {
	text-align: center;
	color: #333333;
	margin-top: 4px;
}
</style>
